Fixes: #50028

Related:

• Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern #51144

What?

Introduces an admin section "Library" for managing template parts and patterns.

🤖 Generated by Copilot at e08f66f

This pull request introduces a new feature for block patterns that can be saved and synced across the site. It renames the existing Reusable block block type to Pattern and adds a source property to distinguish core and user patterns. It also adds compatibility for WordPress 6.3 by loading custom files and extending the REST API. It updates the block editor, the edit site, and the block library packages to support the new feature. It modifies the documentation, the tests, and the labels to reflect the new terminology.

Important Notes

Pattern categorization was explored via a new taxonomy in #51144 however given the tight timeframe before 6.3's beta, we've removed that in favour of initially displaying all patterns in the "Your Patterns" category.

There is currently no pagination for the "Your Patterns" category.

It's possible we may get the above approved as "blessed" tasks however for the time being the current state of this PR should be an MVP we can land for 6.3.

Why?

See #50028 for discussion and history.

How?

• Builds upon the work done in Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern #51144 which renames Reusable Blocks to Patterns and allows user-created non-synced patterns. It also extends the the wp_block CPT to add custom post meta
• A new attribute has been added to the pattern items returned by the REST controller to facilitate filtering of core patterns
• Adds new PostSyncStatus component to allow changing whether a user created pattern is synced or not
• Adds change-case and remove-accents dependencies to the site editor package so pattern filtering can match the block editor inserter
• New AddNewPattern and CreatePatternModal components added to allow pattern creation in the site editor library
• Removes old template part creation from AddNewTemplate
• Updates CreateTemplatePartModal to be consistent with the patterns modal
• Improves sidebar and navigation for mobile viewports
• Updates PageLibrary adding new hooks and components to combine display of template parts and patterns
• Tweaks the path for PageMain to render PageLibrary
• Adds custom class support to the site editor's Page component to aid styling
• Adds suffix support to sidebar navigation items
• Adds new sidebar navigation screens for the Library and Patterns
• Updates the main sidebar navigation screen to navigate to the library path
• Removes the old template part sidebar navigation screen
• Updates the sidebar navigation screen to accept a custom backPath prop
• Updates routing in site editor's sidebar
• Updates sync-state-with-url hooks to work with the Library or set wp_block entity from URL params
• Adds setReusableBlock action in the edit-site store
• Updates the get-is-list-page.js util to include Library pages
• Adds debounced input hook for pattern filtering purposes

🤖 Generated by Copilot at e08f66f

• Rename the Reusable block block type to Pattern and update the labels and titles of the inserter tabs, menu items, and modal dialogs to reflect the new terminology (link, link, link, link, link, link, link, link, link, link, link, link)
• Add the source property to the block patterns schema and response and register the core patterns with the core source for WordPress 6.3 compatibility (link, link, link)
• Add custom fields support to the wp_block post type and register the wp_block_sync_status meta field to store the sync status of a pattern for WordPress 6.3 compatibility (link)
• Add the PostSyncStatus component to the post status sidebar panel to display the sync status of a pattern and allow toggling it (link, link)
• Add the setReusableBlock action to the edit site store to set a reusable block (or pattern) in the store (link)
• Add a condition to the block block edit function to check if the block is an unsynced pattern and replace its blocks with cloned blocks to avoid editing the original pattern content (link, link, link)
• Add the code that clicks the sync toggle input in the create reusable block modal to enable syncing the pattern with the original content (link, link)
• Add the change-case and remove-accents dependencies to the edit site package to use them for converting the pattern titles to kebab case for the slug (link, link)
• Remove the gutenberg_load_remote_block_patterns and related functions from the WordPress 6.2 compatibility file and move them to the WordPress 6.3 compatibility file with some modifications (link, link)
• Add the custom block patterns controller and functions files to the load file for WordPress 6.3 compatibility (link, link)

Testing Instructions

1. Load the site editor and navigate to the Library via the sidebar navigation
2. Ensure you can navigate between pattern categories and navigate back to appropriate screens
3. Confirm that the correct Template Parts are displayed in the top Template Part categories i.e. Headers, Footers, and Uncategorized.
4. Ensure your current theme's patterns show in categories below the template parts (e.g. for TT3, there'll be three categories Featured, Posts, and Footers. Yes, currently there'll be some overlap in categories. Each category for TT3 will have a single pattern.)
5. Via the sidebar nav screen's + button create a template part
6. There should be no core patterns displayed in any category.
7. Your user created patterns (including reusable blocks should be included under a Custom Patterns category
8. Create some synced patterns (formerly reusable blocks) and some unsyced patterns. This can be done via the + button next to the Library navigation screens title or by selecting blocks in the Block Editor and choosing "create a pattern" from the block toolbar's more menu.
9. After creating some patterns make sure that the synced blocks are displayed together in a section above the unsynced patterns.
10. Synced patterns should have a highlighted icon beside their name
11. Confirm that Template Parts and your user created patterns can be edited and saved
12. Ensure that theme supplied patterns cannot be edited
13. Navigate back to Your Patterns and delete one of your patterns
14. Ensure the category counts in the sidebar navigation are still correct
15. Try filtering patterns in a category and that they are filtered as expected
16. Load the site editor on mobile and give the navigation a thorough test

Testing Instructions for Keyboard

1. Load the site editor and tab through to the Library sidebar navigation option and hit enter or space
2. Tab through the Library navigation screen and confirm access to the "Create a Pattern" dropdown which offers options to create a template part or pattern
3. Create both a template part and pattern, ensuring you can tab through the modal form fields, update as desired and save
4. Tab through into the block editor and update the template part/pattern before saving
5. Confirm you can tab back to the "Open Navigation" button and that pressing enter reopens the sidebar navigation
6. Hit tab until you reach the "Back" button and hit enter
7. You should be back in the Library, on the category previously selected
8. Tab through other categories and hit enter to display that categories patterns
9. Tab through to the Library page's "Search patterns" input and try filtering the displayed patterns
10. Navigate back to the sidebar navigation and select a theme pattern category e.g. "Featured". Tab back into the library can confirm you cannot select or edit those patterns
11. Navigate back to the sidebar navigation and select "Your Patterns", tab through to the patterns, selecting one and pressing enter. You should be taken to the editor for that pattern.
12. Navigate back to the library category, this time tab through until you get to a pattern's "Actions" dropdown. Press enter to see the available actions, there should only be one to delete the pattern. Select that and confirm the pattern was deleted.
13. Confirm you can also tab through to the "Manage all reusable blocks" nav item and that it will take you through to the wp-admin page for the wp_block CPT.

Screenshots or screencast